<script type="text/javascript">
$(document).ready(function(){	

	initializeGeoCoder();
	$("#map_canvas").hide();
	$("#request1").hide();
	$("#request2").show();


	jQuery.extend(jQuery.validator.messages, {
	  required: '*',
	  remote: '*'
	});
	
	$("#informationralimo").validate({
		errorClass: "my-error-class",
		validClass: "my-valid-class",
		debug: false,
		rules: {
			cityname: "required",
			vehicletype: "required"
		},
		submitHandler: function(form){
			$.post("query/addralimoinfo.php", $("#informationralimo").serialize(), function(data){
				var txt = '';
				$.each(data, function(key, val){
					txt += val;
				});
				
				txt = txt.replace(/[`~!@#$%^&()_+\=?;'"<>\{\}\[\]\\\/]/gi, '');
				var result = txt.split(",");
				
				alert(result[0]);
				if( $('#uponrequest').is(':checked') ) {
					window.location.replace("panel.php?page=add_ralimoservicesnotes&id="+result[1]);
				}else{
					window.location.replace("panel.php?page=add_ralimovehiclerates&id="+result[1]+ ","+result[2]);
				}
			});
		}
	});
	 
	
	$("#cityname").autocomplete({
		source: "query/getcity.php",
		minLength: 2,
		open: function() {
			$( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
		},
		close: function() {
			$( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
		}
	});	

	$("#vehicletype").autocomplete({
		source: "query/getvehicletype.php",
		minLength: 2,
		open: function() {
			$( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
		},
		close: function() {
			$( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
		}
	});	
	

});
</script>

<script type="text/javascript">
	var ctr = 1;
	var flag;
	function fncCreateElement(){
		var mySpan = document.getElementById('mySpan');
		var myElement1 = document.createElement('input');
		myElement1.setAttribute('type',"text");
		myElement1.className = 'inp-form';
		myElement1.setAttribute('placeholder', "Vehicle Model");
		myElement1.setAttribute('id',"vehiclemodel"+ctr);
		myElement1.setAttribute('name',"vehiclemodel[]");
		myElement1.style.width = '195px';
		myElement1.style.textAlign = 'center';
		myElement1.style.margin = '0px 0px 5px 0px';
		mySpan.appendChild(myElement1);		   
		
		var myElement1 = document.createElement('&nbsp;');
		mySpan.appendChild(myElement1);
	}

</script>

<!--  start nav-outer-repeat................................................... END -->
 
 <div class="clear"></div>
 
<!-- start content-outer -->
<div id="content-outer">
<!-- start content -->
<div id="content">

<div id="map_canvas"></div>

<table border="0" width="100%" cellpadding="0" cellspacing="0" id="content-table">
<tr>
	<th rowspan="3" class="sized"><img src="images/shared/side_shadowleft.jpg" width="20" height="300" alt="" /></th>
	<th class="topleft"></th>
	<td id="tbl-border-top">&nbsp;</td>
	<th class="topright"></th>
	<th rowspan="3" class="sized"><img src="images/shared/side_shadowright.jpg" width="20" height="300" alt="" /></th>
</tr>
<tr>
	<td id="tbl-border-left"></td>
	<td>
	<!--  start content-table-inner -->
	<div id="content-table-inner">
	
	<table border="0" width="100%" cellpadding="0" cellspacing="0">
	<tr valign="top">
	<td>
	
	
		<!--  start step-holder -->
		<div id="step-holder">
			<div class="step-no">1</div>
			<div class="step-dark-left">Add Ralimo Details</div>
			<div class="step-dark-right">&nbsp;</div>
			<div class="step-no">2</div>
			<div class="step-light-left">Add Ralimo Rates</div>
			<div class="step-light-right">&nbsp;</div>
			<div class="step-no">3</div>
			<div class="step-light-left">Add Other Services</div>
			<div class="step-light-round">&nbsp;</div>
			<div class="clear"></div>
		</div>
		<!--  end step-holder -->
	
		<!-- start id-form -->
		<form id="informationralimo" method="post" action="">
			<table border="0" cellpadding="0" cellspacing="0"  id="id-form">
				<tr>
					<th valign="top">City:</th>
					<td>
						<input type="text" name="cityname" id="cityname" class="inp-form" placeholder="City" style="text-align: center;" />
					</td>
				</tr>
				
				<tr>
					<th valign="top">City/Company Name:</th>
					<td>
						<input type="text" name="companyname" id="companyname" class="inp-form" placeholder="City/Company Name" style="text-align: center;" />
					</td>
				</tr>

				<tr>
					<th valign="top">Vehicle Type:</th>
					<td>
						<input type="text" name="vehicletype" id="vehicletype" class="inp-form" placeholder="Vehicle Type" style="text-align: center;"/>
						&nbsp;
					</td>
				</tr>
				
				<tr>
					<th valign="top">Vehicle Model:</th>
					<td>
						<input type="text" name="vehiclemodel[]" id="vehiclemodel" class="inp-form" placeholder="Vehicle Model" style="text-align: center;"/>
						&nbsp;
						<span id="mySpan"></span>
						<input name="btnButton" type="button" value="+ Add More" onClick="JavaScript:fncCreateElement();">	
					</td>
				</tr>
				
				<tr>
					<th valign="top">Capacity:</th>
					<td>
						<input type="text" name="capacity" id="capacity" class="inp-form" placeholder="Capacity" style="text-align: center;"/>
						&nbsp;	
					</td>
				</tr>
				
				<tr>
					<th valign="top">Cancellation Policy:</th>
					<td>
						<input type="text" name="cancellation" id="cancellation" class="inp-form" placeholder="Cancellation Policy" style="text-align: center;"/>
						&nbsp;	
					</td>
				</tr>
				
				<tr>
					<th valign="top">&nbsp;</th>
					<td>
						<input type="checkbox" name="uponrequest" id="uponrequest" value="0" style="text-align: center;"/> Upon Request ?
					</td>
				</tr>

				<tr>
					<th>&nbsp;</th>
					
					<td id="request2" valign="top">
						<input type="submit" class="form-next" />
						<input type="reset" value="" class="form-reset"  />
					</td>
				</tr>
			
			</table>
		</form>
	<!-- end id-form  -->

	</td>
	<td>
	
	
	<!--  start related-activities -->
	<div id="related-activities">
		
		<!--  start related-act-top -->
		<div id="related-act-top">
		<img src="images/forms/step_bar.png" width="271" height="43" alt="" />
		</div>
		<!-- end related-act-top -->
		
		<!--  start related-act-bottom -->
		<div id="related-act-bottom">
		
			<!--  start related-act-inner -->
			<div id="related-act-inner">
			
				<div class="left"><a href=""><img src="images/forms/icon_plus.gif" width="21" height="21" alt="" /></a></div>
				<div class="right">
					<h5>Adding Ralimo Details:</h5><br>
					<ul class="greyarrow">
						<li>First, be sure to add the city of the affiliate where it belong in the Manage cities before filing up the necessary information.</li>
						<li>Second, type in the vehicle type and choose from the list.</li>
						<li>Third, type in the vehicle model just click add more for more.</li>
						<li>Fourth, type in the capacity and its cancellation policy.</li>
					</ul>
				</div>
				
				<div class="right" style="color:red;">
					<h5>Note:</h5>
					If the vehicle type is on upon request just tick the check box.
				</div>
				
				<div class="clear"></div>
			</div>
			<!-- end related-act-inner -->
			<div class="clear"></div>
		
		</div>
		<!-- end related-act-bottom -->
	
	</div>
	<!-- end related-activities -->
	
	

</td>
</tr>
<tr>
<td><img src="images/shared/blank.gif" width="695" height="1" alt="blank" /></td>
<td></td>
</tr>
</table>
 
<div class="clear"></div>
 

</div>
<!--  end content-table-inner  -->
</td>
<td id="tbl-border-right"></td>
</tr>
<tr>
	<th class="sized bottomleft"></th>
	<td id="tbl-border-bottom">&nbsp;</td>
	<th class="sized bottomright"></th>
</tr>
</table>



<div class="clear">&nbsp;</div>

</div>
<!--  end content -->
<div class="clear">&nbsp;</div>
</div>
<!--  end content-outer -->


<div class="clear">&nbsp;</div>
